<template>
  <section>
    <section class="todoapp" v-cloak>
      <header class="header">
        <div id="user-info"><span class="sign-out" @click="signOut">退出登录</span></div>
        <h1>待办事项</h1>
        <input class="new-todo" autofocus autocomplete="off" placeholder="需要做什么？" v-model="newTodo" @keyup.enter="addTodo">
      </header>
      <section class="main" v-show="todos.length">
        <input class="toggle-all" type="checkbox" v-model="allDone">
        <ul class="todo-list">
          <li class="todo" v-for="todo in filteredTodos" :class="{completed: todo.status, editing: todo == editedTodo}">
            <div class="view">
              <input class="toggle" type="checkbox" v-model="todo.status" @change="toggle(todo)">
              <label @dblclick="editTodo(todo)">{{todo.content}}</label>
              <button class="destroy" @click="removeTodo(todo)"></button>
            </div>
            <input class="edit" type="text" v-model="todo.content" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
          </li>
        </ul>
      </section>
      <footer class="footer" v-show="todos.length">
        <span class="todo-count">
          <strong>{{remaining}}</strong>事项进行中
        </span>
        <ul class="filters">
          <li><span  :class="{selected: filter == 'all'}" @click='filterTodos("all")'>所有</span></li>
          <li><span  :class="{selected: filter == 'active'}" @click='filterTodos("active")'>进行中</span></li>
          <li><span  :class="{selected: filter == 'completed'}" @click='filterTodos("completed")'>已完成</span></li>
        </ul>
        <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
          清除已完成
        </button>
      </footer>
    </section>
    <footer class="info">
      <p>双击编辑待办事项</p>
    </footer>
  </section>
</template>

<script>
import { appKey, appId, dev } from "../config/config";

// 过滤指令
const filters = {
    all: function(todos) {
        return todos;
    },
    active: function(todos) {
        return todos.filter(function(todo) {
            return !todo.status;
        });
    },
    completed: function(todos) {
        return todos.filter(function(todo) {
            return todo.status;
        });
    }
};

export default {
    name: "index",
    data() {
        return {
            todos: [],
            newTodo: "",
            editedTodo: null,
            filter: "all"
        };
    },

    mounted: function() {
        this.isAuthorization();
    },

    computed: {
        filteredTodos: function() {
            return filters[this.filter](this.todos);
        },
        remaining: function() {
            return filters["active"](this.todos).length;
        },
        allDone: {
            get: function() {
                return this.remaining === 0;
            },
            set: function(value) {
                this.todos.forEach(todo => {
                    if (value) {
                        todo.status = 1;
                    } else {
                        todo.status = 0;
                    }

                    this.post({
                        id: todo.id,
                        content: todo.content,
                        status: todo.status
                    });
                });
            }
        }
    },
    methods: {
        // 获取数据
        getData: function() {
            this.$http
                .get(
                    "https://baas.qingful.com/2.0/class/home/table/todos/fetchAll?whereIn=status,0,1",
                    {
                        headers: {
                            "Content-Type": "application/json",
                            "x-qingful-appid": appId,
                            "x-qingful-appkey": appKey,
                            "x-qingful-dev": dev,
                            Authorization: this.authorization
                        }
                    }
                )
                .then(
                    function(res) {
                        this.todos = res.body.data;
                    },
                    function(err) {
                        if (err.status == 401) {
                            this.signOut();
                        };
                        console.log("获取数据失败");
                    }
                );
        },

        // 数据添加修改
        post: function(data) {
            this.$http
                .post(
                    "https://baas.qingful.com/2.0/class/home/table/todos/add",
                    data,
                    {
                        headers: {
                            "Content-Type": "application/json",
                            "x-qingful-appid": appId,
                            "x-qingful-appkey": appKey,
                            "x-qingful-dev": dev,
                            Authorization: this.authorization
                        }
                    }
                )
                .then(
                    function(res) {
                        this.getData();
                        console.log("成功提交");
                    },
                    function(err) {
                        console.log("网络出错，提交失败");
                    }
                );
        },

        //删除数据
        del: function(id) {
            this.$http({
                url:
                    "https://baas.qingful.com/2.0/class/home/table/todos/delete?where=id," +
                    id,
                method: "GET",
                data: {},
                headers: {
                    "Content-Type": "application/json",
                    "x-qingful-appid": appId,
                    "x-qingful-appkey": appKey,
                    "x-qingful-dev": dev,
                    Authorization: this.authorization
                }
            }).then(
                function(res) {
                    console.log("成功删除");
                    this.getData();
                },
                function(err) {
                    console.log("网络出错，删除失败");
                }
            );
        },

        // 新建事项
        addTodo: function() {
            const value = this.newTodo && this.newTodo.trim();
            if (!value) {
                return;
            }

            this.post({
                content: value,
                status: 0
            });
            this.newTodo = "";
        },
        //  标记为完成或未完成
        toggle: function(todo) {
            const id = todo.id;
            const status = todo.status == false ? 0 : 1;

            this.post({
                id: id,
                status: status
            });
        },
        //  删除
        removeTodo: function(todo) {
            this.del(todo.id);
        },

        // 编辑
        editTodo: function(todo) {
            this.beforeEditCache = todo.content;
            this.editedTodo = todo;
        },
        // 完成编辑
        doneEdit: function(todo) {
            if (!this.editedTodo) {
                return;
            }
            this.editedTodo = null;
            todo.content = todo.content.trim();
            if (!todo.content) {
                this.removeTodo(todo);
            } else {
                this.post({
                    id: todo.id,
                    content: todo.content
                });
            }
        },
        // 取消编辑
        cancelEdit: function(todo) {
            this.editedTodo = null;
            todo.content = this.beforeEditCache;
        },

        // 清除全部已完成

        removeCompleted: function() {
            const completed = filters.completed(this.todos);
            completed.forEach(todo => {
                this.del(todo.id);
            });
        },

        // 登录验证
        isAuthorization: function() {
            this.authorization = localStorage.getItem("Authorization");
            if (!this.authorization) {
                this.$router.push({ path: "/login" });
            } else {
                this.getData();
            }
        },

        //过滤事件
        filterTodos: function(filter) {
            this.filter = filter;
        },

        // 退出登录
        signOut: function() {
            localStorage.removeItem("Authorization");
            window.location.reload();
        }
    },
    // 自定义指令
    directives: {
        "todo-focus": function(el, binding) {
            if (binding.value) {
                el.focus();
            }
        }
    }
};
</script>


<style scoped>
.todoapp {
    background: #fff;
    margin: 180px 0 40px 0;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

#user-info {
    position: absolute;
    top: -180px;
    width: 100%;
}

#user-info span {
    float: right;
    margin: 10px;
    color: rgba(175, 47, 47, 0.3);
    cursor: pointer;
}

.todoapp input::-webkit-input-placeholder {
    font-style: italic;
    font-weight: 300;
    color: #e6e6e6;
}

.todoapp input::-moz-placeholder {
    font-style: italic;
    font-weight: 300;
    color: #e6e6e6;
}

.todoapp input::input-placeholder {
    font-style: italic;
    font-weight: 300;
    color: #e6e6e6;
}

.todoapp h1 {
    position: absolute;
    top: -110px;
    width: 100%;
    font-size: 50px;
    font-weight: 100;
    text-align: center;
    color: rgba(175, 47, 47, 0.15);
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    border: 0;
    outline: none;
    color: inherit;
    padding: 6px;
    border: 1px solid #999;
    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.new-todo {
    padding: 16px 16px 16px 60px;
    border: none;
    background: rgba(0, 0, 0, 0.003);
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.main {
    position: relative;
    z-index: 2;
    border-top: 1px solid #e6e6e6;
}

label[for="toggle-all"] {
    display: none;
}

.toggle-all {
    background: #fff;
    position: absolute;
    top: -55px;
    left: -12px;
    width: 60px;
    height: 34px;
    text-align: center;
    border: none; /* Mobile Safari */
}

.toggle-all:before {
    content: "❯";
    font-size: 22px;
    color: #e6e6e6;
    padding: 10px 27px 10px 27px;
}

.toggle-all:checked:before {
    color: #737373;
}

.todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #ededed;
}

.todo-list li:last-child {
    border-bottom: none;
}

.todo-list li.editing {
    border-bottom: none;
    padding: 0;
}

.todo-list li.editing .edit {
    display: block;
    width: 506px;
    padding: 13px 17px 12px 17px;
    margin: 0 0 0 43px;
}

.todo-list li.editing .view {
    display: none;
}

.todo-list li .toggle {
    text-align: center;
    width: 40px;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: none; /* Mobile Safari */
    -webkit-appearance: none;
    appearance: none;
}

.todo-list li .toggle:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}

.todo-list li .toggle:checked:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}

.todo-list li label {
    white-space: pre-line;
    word-break: break-all;
    padding: 15px 60px 15px 15px;
    margin-left: 45px;
    display: block;
    line-height: 1.2;
    transition: color 0.4s;
}

.todo-list li.completed label {
    color: #d9d9d9;
    text-decoration: line-through;
}

.todo-list li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 30px;
    color: #cc9a9a;
    margin-bottom: 11px;
    transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover {
    color: #af5b5e;
}

.todo-list li .destroy:after {
    content: "×";
}

.todo-list li:hover .destroy {
    display: block;
}

.todo-list li .edit {
    display: none;
}

.todo-list li.editing:last-child {
    margin-bottom: -1px;
}

.footer {
    color: #777;
    padding: 10px 15px;
    height: 20px;
    text-align: center;
    border-top: 1px solid #e6e6e6;
}

.footer:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
        0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
        0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
    float: left;
    text-align: left;
}

.todo-count strong {
    font-weight: 300;
}

.filters {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 0;
    left: 0;
}

.filters li {
    display: inline;
}

.filters li span {
    color: inherit;
    margin: 3px;
    padding: 3px 7px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
}

.filters li span.selected,
.filters li span:hover {
    border-color: rgba(175, 47, 47, 0.1);
}

.filters li span.selected {
    border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
    float: right;
    position: relative;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

.clear-completed:hover {
    text-decoration: underline;
}

.info {
    margin: 65px auto 0;
    color: #bfbfbf;
    font-size: 10px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-align: center;
}

.info p {
    line-height: 1;
}

.info a {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
}

.info a:hover {
    text-decoration: underline;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .toggle-all,
    .todo-list li .toggle {
        background: none;
    }

    .todo-list li .toggle {
        height: 40px;
    }

    .toggle-all {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-appearance: none;
        appearance: none;
    }
}

@media (max-width: 430px) {
    .footer {
        height: 50px;
    }

    .filters {
        bottom: 10px;
    }
}
</style>
